<template>
  <div style="background-color: #999999">
    <van-nav-bar title="订单详情" left-text="返回" left-arrow>
      <template #right>
        <van-icon name="search" size="18"/>
      </template>
    </van-nav-bar>

    <van-col :span="24">
      <van-cell style="margin-bottom: 10px;" v-for="o in orderArr">
        <p>订单编号：<span>{{ o.number }}</span></p>
        <p>订单状态：<span>{{ o.orderStatus }}</span></p>
      </van-cell>

      <van-cell-group>
        <van-cell>
          <van-steps v-for="o in orderArr" :active="o.active">
            <van-step>
              <p style="text-align: left">买家下单</p>
              <p style="width: 70px; text-align: left; margin-top: 15px;">{{ o.gmtOrder }}</p>
            </van-step>
            <van-step>
              <p style="text-align: center">商家接单</p>
              <p style="width: 70px; text-align: center; margin-top: 15px;">{{ o.gmtPay }}</p>
            </van-step>
            <van-step>
              <p style="text-align: center">买家提货</p>
              <p style="width: 70px; text-align: center; margin-top: 15px;">{{ o.consignTime }}</p>
            </van-step>
            <van-step>
              <p style="text-align: right">交易完成</p>
              <p style="width: 70px; text-align: right; margin-top: 15px;">{{ o.endTime }}</p>
            </van-step>
          </van-steps>
        </van-cell>

        <van-cell style="margin-bottom: 10px" v-for="o in orderArr">
          <van-card
              :num="o.num"
              :price="o.price"
              :title="o.title"
              thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
          />
        </van-cell>
      </van-cell-group>

      <van-cell-group>
        <van-cell style="margin-bottom: 10px" v-for="o in orderArr">
          <p>商品价格：<span>{{ o.price }}元</span></p>
          <p>配送费用：<span>{{ o.orderStatus }}</span></p>
          <p>实付金额：<span>{{ o.payMoney }}元</span></p>
        </van-cell>
      </van-cell-group>

      <van-cell-group>
        <van-cell style="margin-bottom: 10px" v-for="o in orderArr">
          <p>下单时间：<span>{{ o.gmtOrder }}</span></p>
          <p>收货地址：<span>{{ o.receiverAddress }}</span></p>
          <p>收货人：<span>{{ o.receiverName }} {{ o.receiverMobile }}</span></p>
          <p>收货时间：<span>{{ o.endTime }}</span></p>
          <p>发票类型：<span>{{ o.invoiceType }}</span></p>
          <p>发票抬头：<span>{{ o.invoice }}</span></p>
        </van-cell>
      </van-cell-group>

    </van-col>

    <van-row>
      <!--   底部标签栏   -->
      <van-tabbar v-model="active">
        <van-button style="" type="default">默认按钮</van-button>
      </van-tabbar>
    </van-row>
  </div>
</template>

<script>

export default {
  name: "Detail",
  data() {
    return {
      orderArr: [{
        active: 2,
        number: '143322332162',
        orderStatus: '已签收',
        gmtOrder: '2022/09/07 19:12',
        gmtPay: '2022/09/07 19:22',
        consignTime: '2022/09/07 20:00',
        endTime: '2022/09/08 00:00',
        num: '3',
        price: '69.00',
        title: '小米WiFi放大器Pro黑色',
        thumb: 'https://img01.yzcdn.cn/vant/ipad.jpeg',
        payMoney: '69.00',
        receiverAddress: '广东省中山市xxx区xxx街道',
        receiverName: '张三',
        receiverMobile: '18800008888',
        invoiceType: '电子发票',
        invoice: '个人',
      }],

    }

  }
}
</script>

<style scoped>
/*不要写这样的样式,写内联*/
p {
  margin: 0 auto;
}
</style>